<template>
    <div class="store">
         <!-- <p>{{task}}</p>
         <p>{{$store.state.list}}</p>
         <p>{{msg}}</p> -->
         <h1>{{message}}  {{str}}  {{flag}}</h1>
           <input type="text" v-model="title"> <button @click="addTask">添加任务</button>
           <!-- <h1>正在进行的任务：{{$store.getters.doing}}</h1>
           <h1>已经完成的任务：{{$store.getters.done}}</h1> -->
            <h1>正在进行的任务：{{doing}}</h1>
           <h1>已经完成的任务：{{done}}</h1>
         <ul>
            <li v-for="item,index in list" :key="item.id">
                <input type="checkbox" v-model="item.status">
                <span>{{item.title}}</span>
                <span @click="del(item.id)">删除</span>
            </li>
         </ul>


         <!-- 模块化 -->
       
         <h1>我是a模块的数据{{$store.state.a.number}}</h1>
          <h1>我是b模块的数据{{$store.state.b.number}}</h1>

          <!-- 获取a,b模块的计算属性 -->
          <h1>{{$store.getters['a/total']}}</h1>
          <h1>{{$store.getters['b/total']}}</h1>

          <button @click="addNum">数据++</button>
    </div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    data() {
        return {
            title:''
        }
    },
    created() {
        // console.log(this);
        // this.$store.dispatch('getList')
        this.getList()
    },
    // 用计算属性获取state里面的数据，是官方规定的用法  我们也可以直接 this.$store.state.list
    computed: {
        // task(){
        //     return this.$store.state.list
        // },
        // msg(){
        //     return this.$store.state.message
        // },
        ...mapState(['list','message','str','flag']),
        ...mapGetters(['doing','done']),
        // doing(){
        //     return this.$store.getters.doing
        // },
        // done(){
        //     return this.$store.getters.done
        // }

      






    },
    methods: {
        
        ...mapMutations(['add','remove']),
        addTask(){
            this.add(this.title)
            // this.$store.commit('add',this.title)
            this.title = ''

        },
        del(id){
            this.remove(id)
            //  this.$store.commit('remove',id)
        },
        addNum(){
            // 调用a模块下的add方法
            // this.$store.commit('a/add')
            this.$store.commit('b/add')
            
        },
          ...mapActions(['getList'])
    },
}
</script>